<template>
  <div>
    <swiper id="test" :list="banner" :auto="true" style="width:100%;margin:0 auto;" :aspect-ratio="250/800"
            dots-position="center"></swiper>
    <div style="display: flex;flex-direction: row;background: white">

      <div style="flex: 1;padding: 4px;" v-for="menu,index in menuList" v-bind:key="index">
        <router-link :to="{path:'depositIndex'}" style="display: flex;flex-direction: column;text-align: center">
          <div style="width: 100%;display: inline-block;margin-top: .5rem">
            <img :src='[menu.icon]' style="width: 2.5rem;height: 2.5rem"/>
          </div>
          <span style="color: #42578E;font-size: 15px">{{menu.text}}</span>
        </router-link>
      </div>

    </div>
    <product-item-header :title="recommendProduct.title" :feature='recommendProduct.feature'
                         style="margin-top: 8px"></product-item-header>
    <div style="text-align: center;display: flex;flex-direction: column;padding: 10px;background: white">
      <span style="color: #42578E;font-size: 18px;font-weight: bold">存款利率有惊喜</span>
      <span style="color: #8A919C;font-size: 15px;font-weight: normal">微微银行定期存款</span>
      <span style="color: #E16A53;font-size: 30px;font-weight: normal">1.32%~4.875%</span>
      <span style="color: #8A919C;font-size: 12px;font-weight: normal">年利率</span>
      <div style="display: flex;text-align: center;justify-content:center;flex-direction: row;width: 100%;">
        <span class="recommend-tag">约定存期</span>
        <span class="recommend-tag">50元起存</span>
      </div>
      <x-button :gradients="['#F29360', '#F29360']" style="margin:20px 20% 10px 20%;width: 60%;border-radius:99px;">
        立刻存入
      </x-button>
    </div>
    <product-item-header :title="financeProduct.title" :feature='financeProduct.feature'
                         style="margin-top: 8px"></product-item-header>
    <finance-product-list :productList="financeProduct.productList"></finance-product-list>

    <product-item-header :title="depositProduct.title" :feature='depositProduct.feature'
                         style="margin-top: 8px"></product-item-header>
    <deposit-product-list :productList="depositProduct.productList"></deposit-product-list>
    <product-item-header :title="fundProduct.title" :feature='fundProduct.feature'
                         style="margin-top: 8px"></product-item-header>
    <fund-product-list :productList="fundProduct.productList"></fund-product-list>
    <product-item-header :title="insuranceProduct.title" :feature='insuranceProduct.feature'
                         style="margin-top: 8px"></product-item-header>
    <insurance-product-list></insurance-product-list>
    <product-item-header :title="wzGoldProduct.title" :feature='wzGoldProduct.feature'
                         style="margin-top: 8px"></product-item-header>
    <w-z-gold-product-list></w-z-gold-product-list>
  </div>
</template>

<script>
  import { Swiper, XButton } from 'vux'
  import ProductItemHeader from '@/page/home/components/ProductItemHeader'
  import FinanceProductList from '@/page/home/components/FinanceProductList'
  import DepositProductList from '@/page/home/components/DepositProductList'
  import FundProductList from '@/page/home/components/FundProductList'
  import InsuranceProductList from '@/page/home/components/InsuranceProductList'
  import WZGoldProductList from '@/page/home/components/WZGoldProductList'
  import iconDeposit from '@/assets/icon/icon_bank_deposit.png'
  import iconFunt from '@/assets/icon/icon_bank_funt.png'
  import iconProfit from '@/assets/icon/icon_bank_profit.png'
  import iconWeizhong from '@/assets/icon/icon_bank_weizhong.png'

  export default {
    name: 'Wealth',
    components: {
      Swiper,
      ProductItemHeader,
      XButton,
      FinanceProductList,
      DepositProductList,
      FundProductList,
      InsuranceProductList,
      WZGoldProductList
    },
    data () {
      return {
        msg: 'Wealth',
        icon: '',
        banner: [{
          url: '/depositIndex',
          img: 'http://pic.soutu123.com/back_pic/18/09/18/0ca02eb9c35f095481196354a1f455c8.jpg!/fw/700/quality/90/unsharp/true/compress/true',
          title: '理财好产品'
        }, {
          url: 'javascript:',
          img: 'http://pic.soutu123.com/back_pic/18/09/20/e408e91a0fb92de6c2e573820536f7f3.jpg!/fw/700/quality/90/unsharp/true/compress/true',
          title: '收益高又高'
        }],
        menuList: [
          {icon: iconDeposit, text: '银行存款', url: ''},
          {icon: iconFunt, text: '稳健理财', url: ''},
          {icon: iconProfit, text: '基金', url: ''},
          {icon: iconWeizhong, text: '微微金', url: ''}
        ],
        recommendProduct: {
          title: '为你推荐',
          feature: '热门产品 爆款推荐',
          product: {}
        },
        financeProduct: {
          title: '稳健理财',
          feature: '期限更长 收益更高',
          productList: [
            {name: '东海月月盈60', rate: 4.70, term: '56天', investmentBottomLine: '5万元'},
            {name: '广发多添利180', rate: 4.75, term: '189天', investmentBottomLine: '5万元'},
            {name: '德邦心连心210', rate: 4.80, term: '210天', investmentBottomLine: '5万元'}
          ]
        },
        depositProduct: {
          title: '银行存款',
          feature: '随时支取 保本保息',
          productList: [
            {feature: '存满1个月，可达4%', rateRange: '2.80%~4.50%', name: '智能存款+'},
            {feature: '按月付息，灵活支取', rateRange: '4.262%', name: '3年期大额存单'}
          ]
        },
        fundProduct: {
          title: '基金',
          feature: '优选基金 买卖省心',
          productList: [
            {feature: '股市强震，纯债够红', rate: '6.52%', rateStr: '近一年涨幅', name: '华安纯债债券C'},
            {feature: '精选好企业，累计回报超700%', rate: '16.93%', rateStr: '近3年涨幅', name: '广发稳健增长混合'},
            {feature: '持续飘红长达9年', rate: '22.46%', rateStr: '近3年涨幅', name: '汇添富价值精选混合'}
          ]
        },
        insuranceProduct: {
          title: '保险',
          feature: '点滴投入 无限关爱'
        },
        wzGoldProduct: {
          title: '微微金',
          feature: '实物黄金 抗通胀首选'
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .recommend-tag {
    color: #8A919C;
    background: #f6f6f6;
    border-radius: 3px;
    padding: 1px 5px;
    margin-right: 5px;
    font-size: 13.5px;
    display: table-cell;
  }
</style>
